<template>
  <view class="register_box" :style="{ height: windowHeight + 'px' }">
    <view class="logo">
      <image mode="widthFix" src="http://cdn.jxsr.com/logod.png" />
    </view>
    <view class="inputs">
      <view class="views">
        <view class="names">手机号</view>
        <view class="inps">
          <uni-easyinput type="number" :inputBorder="false" :maxlength="11" @input="replaceInput" @blur="Listeningfocus"
            v-model="number" placeholder="请输入手机号"></uni-easyinput>
        </view>
      </view>
      <view class="views">
        <view class="names">验证码</view>
        <view class="inps inps_yzm">
          <uni-easyinput type="number" :clearable="false" :maxlength="6" :inputBorder="false" @input="passwordInput"
            @blur="passwordLose" v-model="password" placeholder="请输入验证码"></uni-easyinput>
          <view class="send" :class="{ send_active: sendShow == true }" @click="sendFn">
            {{ sendTxt }}
          </view>
        </view>
      </view>
    </view>
    <view class="buts" :class="{ buts_active: registerShow == true }" @click="$noMultipleClicks(registerFn)">
      登&nbsp;录
    </view>

    <view>
      <!-- 提示信息弹窗 -->
      <uni-popup ref="message" type="message">
        <uni-popup-message style="padding-top: 160rpx" :type="msgType" :message="messageText"
          :duration="2000"></uni-popup-message>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import { obtain, verificationCodeLogin } from '@/utils/api.js';
export default {
  data() {
    return {
      noClick: true,
      windowHeight: 0,

      number: '',
      password: '',

      type: 'center',
      msgType: 'success',
      messageText: '这是一条成功提示',

      sendTxt: '发送验证码',
      sendShow: false,

      registerShow: false,
    };
  },
  mounted() {
    // this.$refs.setPlan.open()

    // 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
    var _this = this;
    uni.getSystemInfo({
      success: function (res) {
        _this.windowHeight = res.windowHeight;
      },
    });
  },
  methods: {
    // 判断是否是手机号
    replaceInput(e) {
      let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!myreg.test(e)) {
        this.sendShow = false;
        return false;
      } else {
        this.sendShow = true;
        return true;
      }
    },
    // 失去焦点判断是否是手机号
    Listeningfocus(event) {
      let value = event.detail.value;
      let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!myreg.test(value)) {
        this.sendShow = false;
        this.msgType = 'warn';
        this.messageText = `请输入正确的手机号`;
        this.$refs.message.open();
        return false;
      }
    },
    // 发送验证码
    sendFn() {
      var _this = this;
      if (_this.sendShow) {
        if (_this.sendTxt == '发送验证码' || _this.sendTxt == '重新发送') {
          var num = 60;
          let dsq = setInterval(function () {
            _this.sendTxt = num-- + 's';
            if (num == -1) {
              clearInterval(dsq);
              _this.sendTxt = '重新发送';
            }
          }, 1000);
          obtain({
            phoneNumber: this.number,
          })
            .then((res) => {
              if (res.code === 200) {
                // console.log(res);
                uni.showToast({ title: '发送成功', position: 'bottom', icon: 'none' });
              } else {
                uni.showToast({ title: '发送失败，请等待重新发送', position: 'bottom', icon: 'none' });
              }
            })
            .catch((err) => {
              uni.showToast({ title: '网络繁忙', position: 'bottom', icon: 'none' });
            });
        }
      }
    },
    // 验证码验证
    passwordInput(e) {
      let myreg = /^\d{6}$/;
      if (myreg.test(e) && this.sendShow) {
        this.registerShow = true;
      } else {
        this.registerShow = false;
      }
    },
    // 失去焦点
    passwordLose(event) {
      let value = event.detail.value;
      // let myreg=/^\d{6}$/;
      // if (value == '' || !myreg.test(value)) {
      // 	this.registerShow=false
      // 	this.msgType = 'warn'
      // 	this.messageText = `请输入正确的验证码`
      // 	this.$refs.message.open()
      // 	return false;
      // }

      if (value == '') {
        this.registerShow = false;
        this.msgType = 'warn';
        this.messageText = `请输入验证码`;
        this.$refs.message.open();
        return false;
      }
    },
    // 登录
    registerFn() {
      if (this.registerShow) {
        uni.showLoading();
        verificationCodeLogin({
          telephone: this.number,
          invitationCode: this.password,
        })
          .then((res) => {
            uni.hideLoading();
            if (res.code === 200) {
              // console.log(res);
              uni.showToast({ title: '登录成功', position: 'bottom' });
              uni.setStorageSync('token', res.data);
              uni.removeStorageSync('appShopId');
              uni.removeStorageSync('appBaseId');
              let storage = uni.getStorageInfoSync().keys;
              if (storage.indexOf('zhgx_ports') == -1) {
                uni.setStorageSync('zhgx_ports', 'mj');
              }
              uni.reLaunch({
                url: '/pages/index/index',
              });
            } else {
              uni.showToast({ title: '请输入正确的手机号或验证码', position: 'bottom', icon: 'none' });
            }
          })
          .catch((err) => {
            uni.hideLoading();
            uni.showToast({ title: '网络繁忙', position: 'bottom', icon: 'none' });
          });
      }
    },
  },
};
</script>

<style scoped lang="scss">
// uni-page-body{
// 	height: 100%;
.register_box {
  padding: 0 40rpx;
  height: 100%;
  background: url('http://cdn.jxsr.com/dlbj.png') no-repeat;
  background-size: 100% 100%;

  .logo {
    height: 35%;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 440rpx;
      height: 116rpx;
    }
  }

  .inputs {
    .views {
      height: 160rpx;
      margin-bottom: 40rpx;

      .names {
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: $mainText;
        line-height: 36rpx;
      }

      .inps {
        height: 100rpx;
        margin: 20rpx 0;
        padding: 0 20rpx;
        background: #f5f5f5;
        border-radius: 25px;

        ::v-deep .uni-easyinput {
          .uni-easyinput__content {
            min-height: 100rpx;
          }

          uni-input {
            height: 100rpx !important;
          }

          .uni-easyinput__placeholder-class {
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
          }

          .uni-input-input {
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
          }
        }
      }

      .inps_yzm {
        display: flex;
        justify-content: space-between;

        .send {
          font-size: 30rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #999999;
          line-height: 100rpx;
          padding: 0 20rpx 0 20rpx;
        }

        .send_active {
          color: $primaryTextColor;
        }
      }
    }
  }

  .buts {
    height: 100rpx;
    background: #999999;
    border-radius: 50rpx;
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 100rpx;
    text-align: center;
    margin-top: 140rpx;
  }

  .buts_active {
    background: linear-gradient(180deg, #b9d378 0%, #1b9a5d 100%);
  }
}

// }</style>
